<template>
  <div class="inspection-container">
    <!-- 标题 -->
    <div class="childpage-logo-title">
      <i class="iconfont icon_biaotijiantou" @click="$Ctl.backProvePage()"></i>
      <span class="page-title-text">巡检路线图</span>
    </div>
    <!-- 巡检搜索 -->
    <section>
      <div class="inspection-name">
        <el-select v-model="value" filterable placeholder="巡检任务名称" popper-class="inspection-name-select" @change="changeValue">
          <el-option v-for="item in InspectionSelects" :key="item.id" :label="item.name + ' ' + (item.orgName || '')" :value="item.id"></el-option>
        </el-select>
      </div>
    </section>
    <!-- 巡检流程图 -->
    <section style="height:50%;">
      <div class="inspection-left-status">
        <div class="flex-left">
          <img src="../../../assets/images/homeLeft/inspection-wait.gif" alt="等待执行" v-show="inspectionDetails.status == 3" />

          <img src="../../../assets/images/homeLeft/inspection-has.gif" alt="已结束" v-show="inspectionDetails.status == 2" />
          <div class="flex-left-text">
            <p>点位总数</p>
            <p>{{ inspectionDetails.totalPointNum }}</p>
          </div>
        </div>
        <div class="flex-right">
          <p>当前状态</p>
          <p>
            {{
            inspectionDetails.status == 1
            ? "执行中"
            : inspectionDetails.status == 2
            ? "已结束"
            : "待领取"
            }}
          </p>
          <div class="inspection-time">
            <p>巡检开始时间</p>
            <p>{{ beginTime }}</p>
            <p>巡检结束时间</p>
            <p>{{ finishTime }}</p>
            <p>巡检持续时间</p>
            <p>{{ time }}</p>
          </div>

          <div class="inspection-name">
            <p>责任人</p>
            <span>{{inspectionDetails.lliablepersonsName}}</span>
          </div>
        </div>
      </div>
    </section>
    <!-- 实时巡检结果 -->
    <section>
      <div class="inspection-result">
        <h3 class="childpage-title">实时巡检结果</h3>
        <div class="inspection-bar">
          <div class="inspection-bar-l">
            <div>
              <div class="inspection-bar-text" :style="{ bottom: noRate }">{{ inspectionDetails.unfinishedPointNum }}</div>
              <div class="inspection-bar-inner" :style="{ height: noRate }">
                <img src="../../../assets/images/homeLeft/result-no.png" alt />
              </div>
            </div>
            <div class="inspection-status">未完成点位</div>
          </div>
          <div class="inspection-bar-m">
            <div>
              <div class="inspection-bar-text" :style="{ bottom: normalRate }">{{ inspectionDetails.qualifiedPointNum }}</div>
              <div class="inspection-bar-inner" :style="{ height: normalRate }">
                <img src="../../../assets/images/homeLeft/result-normal.png" alt />
              </div>
            </div>
            <div class="inspection-status">合格点位</div>
          </div>
          <div class="inspection-bar-r">
            <div>
              <div class="inspection-bar-text" :style="{ bottom: nopassRate }">{{ inspectionDetails.unQualifiedPointNum }}</div>
              <div class="inspection-bar-inner" :style="{ height: nopassRate }">
                <img src="../../../assets/images/homeLeft/result-nopass.png" alt />
              </div>
            </div>
            <div class="inspection-status">不合格点位</div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import {
  selectInspectTaskListForScreen,
  getInspectTaskDetail,
  getInspectTimeLineMark,
} from '@/api/inspection'
import '@/styles/common/childPage.scss'
let timeInterval = ''
export default {
  name: 'Inspection',
  data() {
    return {
      InspectionSelects: [],
      inspectionDetails: {},
      value: '',
      noRate: Number,
      nopassRate: Number,
      normalRate: Number,
      orgIds: '',
      time: '',
      startStamp: '',
      flag: true,
    }
  },
  props: {
    parames: {
      required: true,
    },
  },
  computed: {
    beginTime() {
      return this.inspectionDetails.firstExamineTime || '暂未开始'
    },
    finishTime() {
      return this.inspectionDetails.finishTime || '暂未结束'
    },
  },
  watch: {
    // value(newvalue, oldvalue) {
    //   if (newvalue && newvalue !== oldvalue) {
    //     this.$Ctl.enterChild(
    //       "Inspection",
    //       {
    //         inspectionId: newvalue
    //       },
    //       "right"
    //     );
    //     console.log(newvalue, oldvalue)
    //     this.getInspectTimeLineMark();
    //     this.getInspectTaskDetail();
    //   }
    // }
  },
  created() {
    let that = this
    that.orgIds = that.parames.orgIds

    //蜂鸟地图切换楼层和场景调用
    window.FunList.refreshmapInspect = this.refreshmapInspect
  },
  mounted() {
    this.selectInspectTaskListForScreen()
  },
  methods: {
    changeValue(val) {
      this.flag = true
      this.$Ctl.enterChild(
        'Inspection',
        {
          inspectionId: val,
        },
        'right'
      )
      this.getInspectTimeLineMark()
      this.getInspectTaskDetail()
      this.$store.commit('setCurInspectId', this.value)
    },
    selectInspectTaskListForScreen() {
      selectInspectTaskListForScreen({
        orgIds: this.orgIds,
      }).then((res) => {
        if (res.status == 200) {
          this.InspectionSelects = res.data
          if (res.data.length > 0) {
            this.value = this.InspectionSelects[0].id
            this.$Ctl.enterChild(
              'Inspection',
              { inspectionId: this.value },
              'right'
            )
            this.getInspectTimeLineMark()
            this.getInspectTaskDetail()
            this.$store.commit('setCurInspectId', this.value)
          } else {
            return false
          }
        }
      })
    },
    setTime() {
      if (!this.inspectionDetails.firstExamineTime) {
        this.time = '-'
        return
      }
      let arr = this.getTimeDuration(
        (new Date().getTime() -
          new Date(this.inspectionDetails.firstExamineTime).getTime()) /
          1000
      )
      this.time = arr
        .map((n) => {
          return n.value + n.unit
        })
        .join('')
    },
    setClock() {
      timeInterval && clearInterval(timeInterval)
      timeInterval = setInterval(() => {
        this.setTime()
      }, 1000)
    },
    getInspectTaskDetail() {
      timeInterval && clearInterval(timeInterval)
      getInspectTaskDetail({ id: this.value }).then((res) => {
        this.$Ctl.loading(1, 10000)
        if (res.status == 200) {
          res.data.finishTime = res.data.finishTime || ''
          res.data.totalPointNum = res.data.pointIds.split(',').length
          this.inspectionDetails = res.data
          let { finishTime, firstExamineTime } = res.data
          if (finishTime) {
            //已结束
            let arr = this.getTimeDuration(
              (new Date(finishTime).getTime() -
                new Date(firstExamineTime).getTime()) /
                1000
            )
            this.time = arr
              .map((n) => {
                return n.value + n.unit
              })
              .join('')
          } else if (firstExamineTime) {
            //进行中
            this.setTime()
            if (res.data.isExpire == 2) {
              this.setClock()
            }
          } else {
            //待领取
            this.time = '-'
          }
          this.noRate =
            (res.data.unfinishedPointNum / res.data.totalPointNum) * 100 + '%'
          this.nopassRate =
            (res.data.unQualifiedPointNum / res.data.totalPointNum) * 100 + '%'
          this.normalRate =
            (res.data.qualifiedPointNum / res.data.totalPointNum) * 100 + '%'
          this.$Ctl.loading(0)
        }
      })
    },
    getTimeDuration(secd) {
      let seconds = parseInt(secd)
      let day = Math.floor(seconds / 86400)
      let hour = Math.floor((seconds - 86400 * day) / 3600)
      let minute = Math.floor((seconds - 86400 * day - hour * 3600) / 60)
      let sec = seconds - 86400 * day - hour * 3600 - minute * 60
      let valueArr = [
        {
          value: day,
          unit: '天',
        },
        {
          value: hour,
          unit: '小时',
        },
        {
          value: minute,
          unit: '分钟',
        },
        {
          value: sec,
          unit: '秒',
        },
      ]
      return valueArr.filter((n) => {
        return n.value > 0
      })
    },
    getInspectTimeLineMark() {
      // 没有巡检计划或者未选择巡检计划不请求数据
      if (!this.value || this.InspectionSelects.length == 0) return
      // 查找当前选中计划的所属单位
      let obj = this.InspectionSelects.filter((n) => {
        return n.id == this.value
      })[0]
      if (!obj) return
      let mapType = this.$store.state.currentMapType
      // unity地图跳转蜂鸟地图
      if (mapType == 4) {
        topVue.$store.commit('setCurrentMapType', 2)
        mapType = 2
      }
      let gisInfo = JSON.parse(localStorage.getItem('ilinkBs_mapGisInfo'))
      if (mapType == 2) {
        if (
          gisInfo &&
          gisInfo.id &&
          obj.orgId == this.$store.state.currentOrgId
        ) {
          this.handleInspectionLocation(gisInfo.id, mapType)
        } else {
          this.$store.commit('setCurrentOrgId', obj.orgId)
          this.$store.commit('setMapSceneTypeStamp', new Date().getTime())
        }
      } else {
        this.handleInspectionLocation(gisInfo.id || 1, mapType)
      }
    },
    // 根据计划id和地图类型查询巡检路线标记信息
    handleInspectionLocation(indoorMapId, mapType, isLocate = true) {
      if (!this.value) return
      let param = {
        id: this.value,
        mapType: mapType,
        indoorMapId,
      }
      if (this.markParamStr === JSON.stringify(param)) {
        this.locationAndMark(mapType, this.markData, isLocate)
      } else {
        getInspectTimeLineMark(param).then((res) => {
          if (res.status == 200) {
            this.markParamStr = JSON.stringify(param)
            this.markData = res.data
            this.locationAndMark(mapType, res.data || [], isLocate)
          }
        })
      }
    },
    locationAndMark(mapType, data, isLocate) {
      if (mapType == 2 && isLocate) {
        if (data.length > 0) {
          window.FunList.InspectionLocation_FMap(this.value, data) //任务id、地图id、室内外
        }
      }
      this.$Ctl.setMapMark({ 22: data }, true, false)
    },
    // 刷新巡检路线标记
    refreshmapInspect() {
      let mapType = topVue.$store.state.currentMapType
      // unity地图跳转蜂鸟地图
      if (mapType == 4) {
        topVue.$store.commit('setCurrentMapType', 2)
        mapType = 2
      }
      let gisInfo = JSON.parse(localStorage.getItem('ilinkBs_mapGisInfo'))
      this.handleInspectionLocation(
        mapType == 2 ? gisInfo.id : 1,
        mapType,
        false
      )
    },
  },
  beforeDestroy() {
    timeInterval && clearInterval(timeInterval)
  },
}
</script>

<style lang="scss" scope>
.inspection-container {
  height: 100%;
  .inspection-name {
    .el-select {
      width: 100%;
    }
    .el-input--suffix {
      &::before {
        content: '';
        border-top: 2px solid #59acb6;
        border-bottom: 2px solid #59acb6;
        position: absolute;
        width: 10px;
        height: 40px;
        left: 0;
        top: 0;
      }
      &::after {
        content: '';
        border-top: 2px solid #59acb6;
        border-bottom: 2px solid #59acb6;
        position: absolute;
        width: 10px;
        height: 40px;
        right: 0;
        top: 0;
      }
    }
    .el-input__suffix {
      left: 0 !important;
      right: initial;
      color: #60c2ff;
    }
    .el-select__caret {
      color: #60c2ff;
    }
    .el-input__inner {
      text-indent: 20px;
      color: #60c2ff;
      background-color: rgba(70, 153, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.2);
      width: 100%;
      position: relative;
    }
  }
  .inspection-left-status {
    margin-top: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    .flex-left {
      position: relative;
      width: 50%;
      min-width: 210px;
      height: 430px;
      position: relative;
      // background: url(../../../assets/images/homeLeft/inspection-bg.png) center
      //no-repeat;
      background-size: cover;
      text-align: center;
      &::before {
        display: block;
        content: '';
        height: 430px;
        width: 100%;
        background: url(../../../assets/images/homeLeft/inspection-bg.png)
          center no-repeat;
        position: absolute;
        left: 0;
        top: 0;
        z-index: -1;
        opacity: 0.8;
      }
      .flex-left-text {
        position: absolute;
        top: 46%;
        left: 40%;
        transform: translate(-50%, -50%);
        color: #ffffff;

        p {
          &:nth-child(1) {
            font-size: 12px;
          }
          &:nth-child(2) {
            margin-top: 10px;
            color: #52d8ff;
            font-size: 24px;
            font-family: 'DigitaldreamFat';
          }
        }
      }
    }
    .flex-right {
      padding-left: 10px;
      color: #ffffff;
      font-size: 16px;
      p {
        &:nth-child(2) {
          color: #eabd23;
          font-size: 18px;
        }
      }
      .inspection-time {
        position: relative;
        padding-left: 20px;
        margin-top: 20px;
        p {
          position: relative;
          &:nth-child(even) {
            color: #4699ff;
            margin-bottom: 15px;
            font-size: 16px;
          }
          &:nth-child(odd) {
            font-size: 18px;
            margin-bottom: 10px;
          }
          &:nth-child(1) {
            &::before {
              content: '';
              display: block;
              position: absolute;
              left: -19px;
              width: 6px;
              top: 5px;
              border: 1px solid #5eb8f7;
              height: 6px;
              border-radius: 50%;
            }
          }
          &:nth-child(3) {
            &::before {
              content: '';
              display: block;
              position: absolute;
              left: -19px;
              top: 5px;
              width: 5px;
              border: 1px solid #5eb8f7;
              height: 5px;
              border-radius: 50%;
            }
          }
        }
        &::before {
          content: '';
          display: block;
          position: absolute;
          border: 1px solid #5eb8f7;
          height: 66px;
          left: 3px;
          top: 10px;
        }
      }
      .inspection-name {
        p {
          font-size: 18px;
          margin-bottom: 10px;
        }
        span {
          font-size: 16px;
        }
      }
    }
  }
  .inspection-result {
    h3 {
      margin: 30px 0;
    }
    .inspection-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .inspection-status {
        height: 30px;
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        color: #a3bedd;
      }
      .inspection-bar-l {
        .inspection-bar-text {
          color: #c3c3c3;
          text-align: center;
        }
      }
      .inspection-bar-m {
        .inspection-bar-text {
          color: #c3c3c3;
          text-align: center;
        }
      }
      .inspection-bar-r {
        .inspection-bar-text {
          color: #c3c3c3;
          text-align: center;
        }
      }
      & > div {
        width: 78px;
        height: 127px;
        background: url(../../../assets/images/homeLeft/result-bg.png);
        &:nth-child(2) {
          background: url(../../../assets/images/homeLeft/result-normalbg.png);
        }
        &:nth-child(3) {
          background: url(../../../assets/images/homeLeft/result-nopassbg.png);
        }
        & > div {
          position: relative;
          height: 100%;
        }
      }
      .inspection-bar-inner {
        overflow: hidden;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        img {
          position: absolute;
          bottom: 0;
          left: 0;
        }
      }
      .inspection-bar-text {
        position: absolute;
        font-size: 16px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>
